<template>
	<view class="columnbox wdh-100 content">
		<view class="columnbox color-box spb jus wdh-100">
		</view>
		<view class="columnbox wdh-100" style="position: relative;z-index: 4;">
			<view class="c-box columnbox">
				<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/734537ac01e14e9daae44ffd210bf09f.png" mode="widthFix" class="wdh-100"></image>
				<view class="c-detail rowbox spb">
					<view class="columnbox">
						<view class="c-num">{{couponsNum}} 张</view>
						<view class="c-use">可用</view>
					</view>
					<view class="u-btn rowbox" @click="toUse">去使用</view>
				</view>
			</view>
			<view class="rowbox type-box spb">
				<view class="columnbox one-type">
					<!-- <view class="rowbox dot-box">1</view> -->
					<image src="/static/img/dsy.png" mode="widthFix"></image>
					待使用
				</view>
				<view class="columnbox one-type">
					<image src="/static/img/ysy.png" mode="widthFix"></image>
					已使用
				</view>
				<view class="columnbox one-type">
					<image src="/static/img/ysx.png" mode="widthFix"></image>
					已失效
				</view>
				<view class="columnbox one-type">
					<image src="/static/img/yzs.png" mode="widthFix"></image>
					已赠送
				</view>
			</view>
			<!-- <scroll-view scroll-x class="type-scroll">
				<view @click="changeType(item)" class="type-scroll-box" v-for="(item,index) in typeList">
					<view class="rowbox type-scroll-info" :class="{'sel-type':curType==item.id}">{{item.title}}</view>
				</view>
			</scroll-view> -->
			<view class="one-box columnbox border" v-for="(item,index) in 0" :key='index'>
				<view class="t-box rowbox wdh-100 spb">
					<view class="rowbox">
						<view class="name">名称</view>
						<view class="rowbox type">汽修站</view>
					</view>
					<view class="rowbox">
						<image class="distance" src="/static/img/weizhi.png" mode="widthFix"></image>
						<view class="name">2.22km</view>
					</view>
				</view>
				<view class="rowbox wdh-100 spb">
					<image src="/static/logo.png" mode="aspectFill" class="c-img"></image>
					<view class="columnbox c-info">
						<view class="rowbox spb wdh-100">
							<view class="name">超值洗车套餐-价值200元</view>
							<view class="price"><text>¥</text> 20</view>
						</view>
						<view class="desc">人工精洗服务一次含抛光、打蜡</view>
						<view class="rowbox wdh-100 spb">
							<view class="rowbox c-num">
								可领取3张洗车劵
							</view>
							<view class="sale">销量5641</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabBar :value='2'></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				zhuanzeng: false,
				couponsNum: 0,
				typeList: [{
						title: '全部',
						id: 0
					},
					{
						title: '加油站',
						id: 1
					},
					{
						title: '汽修厂',
						id: 2
					},
				],
				curType: 0
			};
		},
		onLoad() {
			uni.hideTabBar()
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		onShow() {
			if (this.isLogin) {
				this.getUserInfo()
			} else {
				this.couponsNum = 0
			}
		},
		methods: {
			changeType(v) {
				this.curType = v.id
			},
			getUserInfo() {
				this.$req.get('/xcx/home').then(res => {
					if (res.data.data) {
						this.couponsNum = res.data.data.couponsNum
					}
				})
			},
			toUse() {
				uni.navigateTo({
					url: '/pages/store/nearList?type=0'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.color-box {
		height: 702rpx;
		background: linear-gradient(180deg, #2373CA 0%, #F4F5FA 100%);
		position: fixed;
		top: var(--window-top);
		left: 0;
	}

	.coupon-num {
		font-size: 40rpx;
	}

	.coupon-use {
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.use-btn {
		color: #17698F;
		background: #fff;
		font-size: 28rpx;
		width: 170rpx;
		height: 70rpx;
		border-radius: 100rpx;
	}

	.type-box {
		width: 710rpx;
		padding: 24rpx;
		background: #fff;
		border-radius: 20rpx;

		.one-type {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #212121;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
			}
		}

		.dot-box {
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			background: #cc0001;
			color: #fff;
			padding: 4rpx 10rpx;
			border-radius: 100rpx;
			font-size: 22rpx;
			color: #fff;
			line-height: 22rpx;
		}
	}

	.sel-box {
		margin-top: 40rpx;
		width: 710rpx;
		margin-bottom: 20rpx;

		.sel-one {
			font-size: 28rpx;
			border: #efefef solid 1px;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			width: 200rpx;
		}

		.g-box {
			font-size: 28rpx;
			background: #e9e9e9;
			color: #6c6c6c;
			height: 62rpx;
			width: 140rpx;
			border-radius: 10rpx;
			margin-left: 40rpx;
		}

		.zhuanzengbtn {
			background: #17698F;
			color: #fff;
		}
	}




	.g-user-box {
		font-size: 24rpx;
		color: #17698F;
		background: #f2f2f2;
		justify-content: flex-start;
		width: 710rpx;
		padding: 20rpx 20rpx;
		border-radius: 0 0 20rpx 20rpx;
	}

	.c-box {
		width: 610rpx;
		height: 144rpx;
		position: relative;

		.c-detail {
			width: 610rpx;
			height: 144rpx;
			position: absolute;
			top: 0;
			left: 0;
			padding: 24rpx 60rpx;
		}

		.c-num {
			font-family: DINPro, DINPro;
			font-weight: 900;
			font-size: 40rpx;
			color: #FBE1C5;
		}

		.c-use {
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-top: 10rpx;
		}

		.u-btn {
			width: 168rpx;
			height: 54rpx;
			background: linear-gradient(138deg, #FBE3C8 0%, #F6D0AE 100%);
			border-radius: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
			color: #371901;
		}
	}

	.type-scroll {
		white-space: nowrap;
		width: 100%;
		margin-top: 36rpx;
		margin-bottom: 20rpx;

		.type-scroll-box {
			display: inline-block;
			margin-left: 20rpx;
		}

		.type-scroll-info {
			height: 42rpx;
			border-radius: 8rpx;
			padding: 4rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
			background: #FFFFFF;
			color: #72778A;
		}

		.sel-type {
			background: #126BC9;
			color: #FFFFFF;
		}
	}

	.one-box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		padding: 24rpx;

		.t-box {
			padding-bottom: 24rpx;
			border-bottom: #F6F6F6 solid 1px;
			margin-bottom: 20rpx;

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 24rpx;
				color: #212121;
			}

			.type {
				margin-left: 12rpx;
				height: 34rpx;
				background: #126BC9;
				border-radius: 8rpx;
				padding: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 20rpx;
				color: #FFFFFF;
			}

			.distance {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.c-img {
			width: 132rpx;
			height: 132rpx;
			border-radius: 12rpx;
		}

		.c-info {
			width: calc(100% - 152rpx);
			margin-left: 20rpx;
			height: 132rpx;
			justify-content: space-between;

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}

			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #FF672D;

				text {
					font-size: 24rpx;
				}
			}

			.desc {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #72778A;
				width: 100%;
			}

			.c-num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 20rpx;
				color: #FF672D;
				height: 28rpx;
				background: rgba(#FF672D, .1);
				padding: 2rpx 8rpx;
			}

			.sale {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #72778A;
			}
		}
	}
</style>